<template>
	<view @tap="navToDetailPage(item.id)">
		<view class="product">
			<view>
				<image v-if="item.view_pic" :src="item.view_pic" class="image"></image>
				<image v-if="!item.view_pic" :src="item.pics[0]" class="image"></image>
			</view>
			<view>{{item.title}}</view>
			<view class='shop_name' v-if="item.shop">{{item.shop.name}}<span style="margin-left: 15rpx;"></span> {{item.distance}}</view>
			<view v-if="item.sale_price" class="price">{{item.currency}} {{item.sale_price && item.sale_price.toFixed(2)}} <text
				 v-if="item.is_need_coupon">({{i18n.need_coupon}})</text></view>
			<view>
				<text class="end_date" v-if="item.end_date">{{i18n.expire}}: {{item.end_date.split(' ')[0]}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object
			}
		},
		computed: {
			i18n() {
				return this.$lang.index_index
			}
		},
		methods: {
			navToDetailPage(id) {
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			}
		}
	}
</script>

<style lang='scss'>
	.image {
		width: 100%;
		height: 350rpx;
		border-radius: 20rpx;
	}

	.product {
		flex-grow: 4;
		/* padding-left: 20rpx; */
		margin: 5rpx;
		background-color: #fff8f8;

		.title {
			font-size: 30rpx;
			height: 100rpx;
		}

		.shop_name {
			font-size: 20rpx;
		}

		.end_date {
			font-size: 20rpx;
			border: 1rpx dashed #ccc;
			padding: 2px;
		}

		.price {
			font-size: 30rpx;
			color: red;
			font-weight: bold;
		}
	}
</style>
